@extends('admin.layouts.head')

@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('admin.layouts.navbar')
        @include('admin.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">仪表盘</a></li>
                                <li class="breadcrumb-item active" aria-current="page">用户升级记录</li>
                            </ol>
                        </nav>
                        @verbatim
                        <div class="card">
                            <div class="card-body">

                                <div id="vueApp">
                                    <div class="content-box">

                                        <div class="top-bar" style="padding: 20px 0;">
                                            <el-tag>总奖励：{{totalReward}}</el-tag>

                                            日期：
                                            <el-date-picker
                                                v-model="queryForm.start"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择开始日期">
                                            </el-date-picker>
                                            -
                                            <el-date-picker
                                                v-model="queryForm.end"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择结束日期">
                                            </el-date-picker>
                                            <el-button type="primary" @click="getList">搜索</el-button>
                                            <el-button v-if="adminRole === 2" style="margin-left: 15px;" type="primary" @click="showQrCode">获取二维码</el-button>
                                        </div>


                                        <el-table
                                            :data="dataList"
                                            border
                                            size="mini"
                                            style="width: 100%">
                                            <el-table-column
                                                prop="id"
                                                label="ID"
                                                width="80"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="unionid"
                                                label="unionid"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="old_title"
                                                label="原等级"
                                                width="120"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="new_title"
                                                label="新等级"
                                                width="120"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="kf_name"
                                                label="客服"
                                                width="120"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="reward"
                                                label="奖励"
                                                width="120"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="create_time"
                                                width="160"
                                                label="时间"
                                            >
                                            </el-table-column>
                                        </el-table>

                                        <el-pagination
                                            style="margin-top: 20px"
                                            background
                                            layout="prev, pager, next"
                                            @current-change="pageChange"
                                            :current-page="curPage"
                                            :page-count="totalPage">
                                        </el-pagination>

                                        <!-- 保存窗口 -->
                                        <el-dialog
                                            title="绑定二维码"
                                            :visible.sync="bindQrShow"
                                            width="600"
                                        >
                                            <div class="save-win" style="margin-right: 30px;">
                                                <img :src="bindQrCodeUrl" style="width: 300px; height: 300px" alt="">
                                            </div>
                                        </el-dialog>

                                    </div>

                            </div> <!-- .card-body -->
                        </div> <!-- .card -->
                        @endverbatim
                    </div> <!-- .page-content -->
                </div> <!-- .container-fluid -->
            </div> <!-- .content-container -->
        </div> <!-- .wrapper -->
    </div> <!-- #app -->

    @include('admin.layouts.vuehead')

    <script>
        const vueApp = new Vue({
            el: '#vueApp',
            data() {
                return {
                    queryForm: {
                        page: 1,
                        start: '',
                        end: '',
                    },
                    dataList: [],
                    totalPage: 0,
                    curPage: 0,
                    totalReward: 0,
                    bindQrCodeUrl: '',
                    bindQrShow: false,
                    adminRole: {{$adminRole}},
                }
            },
            mounted() {
                this.getList()
            },
            watch: {

            },
            methods: {
                getList() {
                    if (!this.queryForm.start) {
                        this.queryForm.start = ''
                    }
                    if (!this.queryForm.end) {
                        this.queryForm.end = ''
                    }
                    adminApi_getUserUpgradeLog(this.queryForm).then(res => {
                        this.dataList = res.data.list.data
                        this.totalPage = res.data.list.last_page
                        this.curPage = res.data.list.current_page
                        this.totalReward = res.data.total_reward
                    })
                },
                pageChange(p) {
                    this.queryForm.page = p
                    this.getList()
                },
                search() {
                    this.queryForm.page = 1
                    this.getList()
                },
                showQrCode() {
                    if (this.bindQrCodeUrl) {
                        this.bindQrShow = true
                        return
                    }
                    adminApi_getCustomServiceBindCode({}).then(res => {
                        this.bindQrShow = true
                        this.bindQrCodeUrl = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='+encodeURIComponent(res.data.ticket)
                    })
                }
            },
        })
    </script>
    </body>

@endsection
